//	图表头部组件

import React from 'react';
import styles from './index.module.scss';

interface chartItemType {
	key: string;
	titleValue: string;
	titleShow: boolean;
	tilteHight: number;
	titleBg: string;
	titleFontSize: number;
	titleIsBold: number;
	titleIsItalic: string;
	titleIsUnderLine: string;
	titleFontColor: string;
	titleAlignHor: any;
	titleAlignVer: string;
	titleFontFamily: string;
}

interface IProps {
	isCurrent: boolean;
	handleDelete: ( key: string ) => void;
	chartItem: chartItemType;
}

const ChartHeader = ( props: IProps ) => {
	const { chartItem } = props;
	// console.log( chartItem );
	const titleContainerStyle = {
		height: `${ chartItem.tilteHight || 40 }px`,
		backgroundColor: chartItem.titleBg,
		textAlign: chartItem.titleAlignHor,
		display: chartItem.titleShow === false ? 'none' : 'flex',
	};
	const titleItemStyle = {
		flex: 1,
		fontSize: `${ chartItem.titleFontSize || 14 }px`,
		fontWeight: chartItem.titleIsBold ? 800 : 400,
		fontStyle: chartItem.titleIsItalic ? 'italic' : 'normal',
		textDecoration: chartItem.titleIsUnderLine ? 'underline' : 'none',
		color: chartItem.titleFontColor,
		// opacity: chartItem.titleShow === false ? 0 : 1,	//	是否显示标题，如果不显示，设为不可见，标题位置仍存在
		alignSelf: chartItem.titleAlignVer || 'center',
		fontFamily: chartItem.titleFontFamily,
		// width: '200px',
		// margin: '10px',
	};
	// console.log( titleItemStyle );

	return (
		<div className={ styles.chartHeader } style={ titleContainerStyle }>
			{ <span style={ titleItemStyle }>{ props.chartItem.titleValue || '标题' }</span> }
		</div>
	);
};

export default React.memo( ChartHeader );
